<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>AI聊天</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&display=swap" rel="stylesheet">
		<link rel="shortcut icon" type="image/x-icon" href="../../assets/images/x-icon/agricul.png">
		<link rel="stylesheet" href="../../assets/css/relys/animate.css">
		<link rel="stylesheet" href="../../assets/css/relys/bootstrap.min.css">
		<link rel="stylesheet" href="../../assets/css/relys/all.min.css">
		<link rel="stylesheet" href="../../assets/css/relys/icofont.min.css">
		<link rel="stylesheet" href="../../assets/css/relys/lightcase.css">
		<link rel="stylesheet" href="../../assets/css/relys/swiper.min.css">
		<link rel="stylesheet" href="../../assets/css/relys/style.css">
		<!-- 引入 layui.css -->
		<link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css">
		<style>
			.chat-container {
				width: 80%;
				max-width: 60%;
				margin: 50px auto;
				height: 800px;
				display: flex;
				
				flex-direction: column;
				background: linear-gradient(to bottom, #d7dee9, #b9d5fe);
				border-radius: 10px;
				box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
			}

			.chat-messages {
				flex: 1;
				overflow-y: auto;
				padding: 20px;
			}

			.message {
				display: flex;
				align-items: center;
				margin-bottom: 20px;
			}

			.avatar {
				width: 80px;
				height: 80px;
				border-radius: 50%;
				margin-right: 20px;
			}

			.message-bubble {
				max-width: 70%;
				padding: 20px;
				border-radius: 15px;
				background-color: #f3f3f3;
				color: #333;
				position: relative;
				display: inline-block;
			}

			.user-message {
				display: flex;
				flex-direction: row-reverse;
			}

			.user-message .message-bubble {
				background-color: #DCF8C5;
				margin-right: 20px;
			}

			.bot-message {
				justify-content: flex-start;
			}

			.bot-message .message-bubble {
				background-color: #E6E6E6;
				margin-left: 20px;
			}

			.chat-input {
				display: flex;
				padding: 20px;
				background-color: #f0f0f0;
				border-top: 1px solid #e0e0e0;
			}

			.input-field {
				flex: 1;
				padding: 20px;
				border: 2px solid #ddd;
				border-radius: 25px;
				margin-right: 20px;
				font-size: 18px;
			}

			.send-button {
				border: none;
				border-radius: 25px;
				background-color: #007bff;
				color: white;
				cursor: pointer;
				font-size: 18px;
			}

			.send-button:hover {
				background-color: #0056b3;
			}

			.layui-loading {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background: rgba(255, 255, 255, 0.8);
				display: none;
				justify-content: center;
				align-items: center;
				z-index: 999;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<!-- Page Header Section Start Here -->
			<section class="page-header bg_img padding-tb">
			    <div class="overlay"></div>
			    <div class="container">
			        <div class="page-header-content-area">
			            <h4 class="ph-title">AI聊天</h4>
			            <ul class="agri-ul">
			                <li><a>首页</a></li>
			                <li><a class="active">AI聊天</a></li>
			            </ul>
			        </div>
			    </div>
			</section>
			<!-- Page Header Section Ending Here -->

			<!-- Chat Container -->
			<div class="chat-container">
				<div class="layui-loading">
					<i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop" style="font-size: 30px;"></i>
					<span style="margin-left: 10px;">输出答案中...</span>
				</div>
				<div class="chat-messages" id="chatMessages">
					<!-- 消息内容将通过JavaScript动态添加 -->
				</div>
				<div class="chat-input">
					<input type="text" id="messageInput" class="input-field layui-input" placeholder="请输入你的问题...">
					<button class="send-button layui-btn" onclick="sendMessage()">发送</button>
				</div>
			</div>
		</div>

		<!-- 引入 layui.js -->
		<script src="https://www.layuicdn.com/layui/layui.js"></script>
		<script>
			// 在全局作用域定义这些函数
			var addMessage, sendMessage, scrollToBottom;
			
			layui.use(['layer', 'jquery'], function(){
				var $ = layui.jquery;
				var layer = layui.layer;
				
				// 定义函数
				addMessage = function(sender, text) {
					var messageHtml = `
						<div class="message ${sender}-message">
							<img src="${sender === 'user' ? 'https://www.maotouyingcc.com/wp-content/uploads/2024/09/images.png' : 'https://www.maotouyingcc.com/wp-content/uploads/2024/09/bot.jpg'}" 
								 alt="Avatar" class="avatar">
							<div class="message-bubble">
								${text}
							</div>
						</div>
					`;
					$('#chatMessages').append(messageHtml);
				};
				
				scrollToBottom = function() {
					var container = document.getElementById('chatMessages');
					container.scrollTop = container.scrollHeight;
				};
				
				sendMessage = function() {
					var input = $('#messageInput');
					var message = input.val().trim();
					
					if(message !== '') {
						// 显示用户消息
						addMessage('user', message);
						input.val('');
						scrollToBottom();
						
						// 显示加载动画
						$('.layui-loading').css('display', 'flex');
						
						// 发送请求到服务器
						$.ajax({
							url: 'http://localhost:8080/springbootjlvpC/ai/sendQuestion',
							type: 'GET',
							data: {
								question: message
							},
							contentType: "application/json; charset=utf-8",
							dataType: "text",
							beforeSend: function(xhr) {
								xhr.setRequestHeader("Accept", "application/json; charset=utf-8");
							},
							success: function(response) {
								try {
									if (typeof response === 'string' && response.startsWith('{')) {
										response = JSON.parse(response);
										response = response.msg || response.message || response;
									}
									addMessage('bot', response);
									scrollToBottom();
								} catch (e) {
									addMessage('bot', response);
									scrollToBottom();
								}
							},
							error: function(xhr, status, error) {
								layer.msg('发送消息失败，请重试', {icon: 2});
								console.error('Error:', error);
							},
							complete: function() {
								$('.layui-loading').hide();
							}
						});
					}
				};
				
				// 监听回车键
				$('#messageInput').on('keypress', function(e) {
					if(e.which === 13) {
						sendMessage();
					}
				});
				
				// 初始化欢迎消息
				$(document).ready(function() {
					addMessage('bot', '欢迎使用AI智能问答工具，本工具能够帮组你学习、回答问题，高效便捷地获取信息，知识和灵感!');
				});
			});
		</script>
	</body>
</html>
